<template>
		<div class="body">
		<div class="search-box">
			<input class="search-txt" 
			type="text" 
			placeholder="点击搜索" 
			v-model="keyWords"
			@keydown.enter="getResult(keyWords)">
				<div class="search-btn">
				<a>
					<svg class="icon" viewBox="0 0 1024 1024" width="30px" height="30px">
						<path d="M424.024 766.098c-91.619 0-177.754-35.679-242.538-100.464-133.735-133.737-133.735-351.344 0-485.078 64.784-64.784 150.919-100.462 242.538-100.462s177.754 35.677 242.539 100.462c133.733 133.735 133.735 351.34 0 485.078-64.785 64.783-150.922 100.464-242.539 100.464zM424.024 196.085c-60.637 0-117.643 23.613-160.523 66.489-88.512 88.51-88.51 232.53 0 321.040 42.876 42.876 99.885 66.491 160.523 66.491s117.643-23.614 160.523-66.491c88.51-88.51 88.51-232.53 0-321.040-42.876-42.876-99.885-66.489-160.523-66.489z" fill="rgb(85, 85, 85)" p-id="1176"></path>
						<path d="M886.838 943.904c-14.842 0-29.684-5.663-41.010-16.986l-261.286-261.285c-22.647-22.649-22.647-59.369 0-82.018 22.647-22.647 59.37-22.647 82.018 0l261.286 261.286c22.647 22.649 22.647 59.369 0 82.018-11.325 11.322-26.167 16.985-41.010 16.985z" fill="rgb(85, 85, 85)" p-id="1177"></path>
					</svg>
				</a>
			</div>
		</div>
		<div class="storage" v-if="storage[0]">
			<div class="storage-item" 
			v-for="(item,index) in storage"
			:key="item">
			<span class="text" @click="getResult(item)">{{item}}</span>
			<i class="el-icon-close" @click="deleteItem(index,item)"></i>
			</div>
		</div>
		</div>
</template>

<script>
export default {
	data() {
		return {
			keyWords:"",
			storage:[],
		}
	},
	methods: {
		getResult(keyWords) {
			if(keyWords) {
				this.$router.push(`/result/${keyWords}`);
				if(!localStorage.getItem(`${keyWords}`)) {
					localStorage.setItem(`${keyWords}`,`${keyWords}`);
				}
			}
		},
		deleteItem(index,item) {
			this.storage.splice(index,1);
			localStorage.removeItem(item);
		}
	},
	mounted() {
		for(let v in localStorage) {
			this.storage.push(v)
		}
		this.storage = this.storage.slice(0,-6)
	},
}
</script>

<style lang="less" scoped>
page {
	height: 100vh;
	display: flex;
}
.body {
		margin: 0;
		padding: 0;
	height: 95vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.search-box{
		// position: absolute;
		// top: 50%;
		// left: 50%;
		// transform: translate(-50%,-50%);
		background: #2f3640;
		height: 40px;
		border-radius: 40px;
		padding: 10px;
		display: flex;
		width: 250px;
		justify-content: center;	
		height: 50px;	
		align-items: center;
		.search-txt{
			border: none;
			background: none;
			outline: none;
			float: left;
			padding: 0;
			color: white;
			font-size: 16px;
			line-height: 40px;
		}
		.search-btn{
			position: relative;
			right: -1%;
			width: 2.3em;
			height: 2.3em;
			border-radius: 50%;
			background: white;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.storage {
		display: flex;
		flex-wrap: wrap;
		width: 80vw;
		justify-content: center;
		align-items: center;
		.storage-item {
			display: inline-block;
			background-color: #8496b0;
			border: #8496b0 5px solid;
			border-radius: 10px;
			margin: 5px;
		}
	}
}

// .search-txt:focus {
// 	color: #FF670F;
// }
</style>